<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<title>JAVAscript练习</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="shortcut icon" href="http://pengjianquan.pro.bluej.cn/resume/favicon.ico" />
		<link rel="stylesheet" type="text/css" href="../../index.css"/>
		<style>
			li a {
				float: right;
			}
		</style>
	</head>

	<BODY>
		<pre><h1>JAVAscript练习</a></h1></pre>
		<div id="div1" class="box box-re form-inline">
			1、DOM节点 首尾子节点<br><br>
			<div class="box box-re">
				例1：首尾节点<br><br>
				<ul class="list-group">
					<li class="list-group-item">子节点1 首节点</li>
					<li class="list-group-item">子节点2</li>
					<li class="list-group-item">子节点2 尾节点</li>
				</ul>
				<button class="btn btn-info">修改首节点文字</button> <code>firstChild & firstElementChild</code><br><br>
				<button class="btn btn-info">修改尾节点文字</button> <code>lastChild & lastElementChild</code>
			</div>
		</div>

		<div id="div2" class="box box-re form-inline">
			2、DOM节点 兄弟节点<br><br>
			<div class="box box-re">
				例1：首尾节点<br><br>
				<ul class="list-group">
					<li class="list-group-item">子节点1 首节点</li>
					<li class="list-group-item">子节点2</li>
					<li class="list-group-item">子节点2 尾节点</li>
				</ul>
				<button class="btn btn-info">查看子节点2前兄弟节点</button> <code>previousSibling & previousElementSibling</code><br><br>
				<button class="btn btn-info">查看子节点2后兄弟节点</button> <code>nextSibling & nextElementSibling</code>
			</div>
		</div>

		<div id="Record" class="box box-re red">
			记录<br>
			<p><b>首尾子节点：</b>firstChild & firstElementChild / lastChild & lastElementChild</p>
			<p><b>兄弟子节点：</b>previousSibling & previousElementSibling / nextSibling & nextElementSibling</p>
			<p><b>兼容问题：</b>都是通过判断来解决兼容问题</p>
		</div>

	</BODY>
	<script>
		var div1 = document.getElementById('div1');
		var div1_li_group = div1.querySelector('.list-group');
		var div1_btn_group = div1.getElementsByTagName('button');
		//修改首节点文字
		div1_btn_group[0].addEventListener('click',function(){
			div1_li_group.firstElementChild.textContent = '第一个个子节点';
		});
		//修改尾节点文字
		div1_btn_group[1].addEventListener('click',function(){
			div1_li_group.lastElementChild.innerText = '最后一个节点';
		});

		var div2 = document.getElementById('div2');
		var div2_li_group = div2.querySelector('.list-group');
		var div2_btn_group = div2.getElementsByTagName('button');

		//查看子节点2前兄弟节点
		div2_btn_group[0].addEventListener('click',function(){
			div2_li_group.children[1].previousElementSibling.style.backgroundColor = '#ccc';
		});
		//查看子节点2后兄弟节点
		div2_btn_group[1].addEventListener('click',function(){
			div2_li_group.children[1].nextElementSibling.style.backgroundColor = '#ccc';
		});
	</script>
</HTML>